<template>
	<view class="sign-page">
		<checkbox-group @change="checkedIds" style="width: 100%;">
			<u-card margin="10rpx 0" v-for="e in list" :key='e.id' style="width: 100%;">
				<view class="u-flex u-row-between" slot="head">
					<text class="u-font-32 yu-bold">{{e.lessioninfo}}</text>
				</view>
				<view class="u-flex u-row-between" slot="body">
					<checkbox :value="e.paymentid + '&' + e.stuname" :checked="e.checked">
						<text class="yu-bold u-p-l-50" style="padding:0;">{{e.stuname}}</text>
					</checkbox>
					<view class="" style="width: 340rpx;">
						<text>课程进度：{{e.usedtimes}} / {{e.alltimes}}</text>
						<u-line-progress :striped="true" :percent="Math.floor(e.usedtimes*100 / e.alltimes)" :striped-active="true"></u-line-progress>
					</view>
				</view>
			</u-card>
		</checkbox-group>
		<view style="width:100% ;position: fixed;bottom:0rpx;padding: 20rpx 200rpx;background-color: #fff;">
			<u-button :ripple="true" type="warning" ripple-bg-color="#fab6b6" plain :loading="false" @click="sign">点名</u-button>
		</view>
		<view class="">
			<!-- 学生stuname，课程lessionname，类型typename，卡cardname，进度 yishang / lessiontimes -->

		</view>
		<popup ref="popup" type="center">
			<view class="pop yu-flex yu-flex-col ">
				<view style="margin-top: 50rpx;width: 100%" class="yu-color-3 yu-font-19 yu-bold u-text-left">已选择学生：</view>
				<view style="border-bottom: 1rpx solid #f29100;margin:20rpx 40rpx;width: 100%;padding: 20rpx 0;">
					<text style="padding: 0 10rpx;" v-for="e in checkNames">{{e}}</text>
				</view>
				<view style="margin-top: 20rpx;width: 100%;" class="yu-color-3 yu-font-19 yu-bold u-text-left">课程内容：</view>
				<textarea @blur="bindTextAreaBlur" style="max-height: 150rpx;width: 98%; border: 1rpx solid #f29100;border-radius: 12rpx;padding: 10rpx;margin: 30rpx 0;" />
				<!-- <button type="primary" size="default" :loading="false" plain @click="save">提交</button> -->
				<u-button :ripple="true" type="warning" ripple-bg-color="#f29100" plain :loading="false" @click="save">提交</u-button>
			</view>
		</popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				checkids:[],
				checked: 0,
				content:''
			};
		},
		onPullDownRefresh() {
			this.getData()
		},
		onLoad() {
			this.getData()
		},
		computed:{
			checkIds(){
				if (this.checkids.length>0){
					const arr = this.checkids.map(e=>{
						return e.slice(0,e.indexOf('&'))*1
					})
					return arr
				}else{
					return []
				}
			},
			checkNames(){
				if (this.checkids.length>0){
					const arr = this.checkids.map(e=>{
						return e.slice(e.indexOf('&') + 1)
					})
					return arr
				}else{
					return []
				}
			}
		},
		methods: {
			checkedIds(e){
				this.checkids= e.detail.value
				console.log(this.checkids);
			},
			save() {
				if(this.content.length<1){
					return this.$api.msg('请输入课程内容！')
				} 
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				uni.request({
					method: 'POST',
					url: this.$api.json('baseUrl') + '/lession/h5doSign',
					data: {
						 paymentids: this.checkIds,
						 content: this.content
					},
					success: (res) => {
						uni.hideLoading()
						console.log(res.data, 777);
						const result = res.data
						if (result.resultCode === '000000') {
							this.$refs.popup.close()
							this.$api.msg('成功签到'+result.data+'个学生！')
							setTimeout(()=>{
								uni.hideToast()
								this.checkids = []
								this.list = []
								this.getData()
							},1500)
						} else if (result.resultCode === '200009') {
							uni.redirectTo({
								url: '/pages/login/login'
							})
						} else {
							this.$api.msg(result.resultInfo || res.errMsg);
						}
					}
				})
			},
			sign(val) {
				console.log(this.checkIds,this.checkNames);
				if (this.checkids.length<1){
					return this.$api.msg('请选择学生点到！')
				}else{
					this.$refs.popup.open()
				}
			},
			bindTextAreaBlur(e){
				this.content = e.detail.value
			},
			checkedCard(i) {
				this.checked = i
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					method: 'POST',
					url: this.$api.json('baseUrl') + '/payment/h5findSignList',
					data: {},
					success: (res) => {
						uni.hideLoading()
						const result = res.data
						uni.stopPullDownRefresh();
						if (result.resultCode === '000000') {
							this.list = result.data
							this.list.forEach(e=>{
								e.checked = false
							})
						} else if (result.resultCode === '200009') {
							this.$api.msg(result.resultInfo || res.errMsg);
							uni.redirectTo({
								url: '/pages/login/login'
							})
						} else if (result.resultCode === '200010') {
							this.$api.msg(result.resultInfo || res.errMsg);
							setTimeout(()=>{
								uni.redirectTo({
									url: '/pages/index/index'
								})
							},1500)
						} else {
							this.$api.msg(result.resultInfo || res.errMsg);
							// setTimeout(()=>{uni.navigateBack()},1000)
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.sign-page {
		width: 100%;
		// .item {
		// 	padding: 20rpx;
		// 	margin: 20rpx 10rpx;
		// 	background: #fff;
		// 	border-radius: 20rpx;
		// 	box-shadow: 2rpx 2rpx #C8C7CC;
		// 	text{
		// 		text-align: left;
		// 	}
		// }

		// .title {
		// 	font-size: 40rpx;
		// 	padding: 20rpx;
		// 	background: linear-gradient(-30deg, rgb(235, 235, 235), rgb(255, 236, 229));
		// 	;
		// 	border-radius: 20rpx;
		// 	text-align: center;
		// }

		// .card {
		// 	text-align: center;
		// 	// border: 1px solid #aa0000;
		// 	background: #FFFFFF;
		// 	padding: 10rpx 20rpx;
		// 	width: 100rpx;
		// 	height: 150rpx;
		// 	margin: 20rpx;
		// 	border-radius: 20rpx;
		// }

		// .active {
		// 	border: 1px solid red;
		// }
	}
</style>
